<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>微博舆情分析系统-注册</title>
  <script src="https://unpkg.com/vue@3"></script>
  <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
  <style>
    body {
            background: linear-gradient(to right, skyblue, pink);
            margin: 0;
            display: flex;
            justify-content: center;
            align-items: center;
        }
        .container {
            display: flex;
            justify-content: center;
            align-items: center;
            width: 100%;
            height: 100%;
            margin-top: 150px;
        }
        .register {
            width: 800px;
            max-width: 600px; /* 添加最大宽度以防止在大屏幕上变得过大 */
            height: 500px;
            background-color: #ffffff;
            padding: 50px;
            box-sizing: border-box;
            border-radius: 20px;
        }
        .appname {
            font-size: 30px;
            font-weight: 700;
            text-align: center;
        }
        .title {
            font-size: 30px;
            font-weight: 700;
            text-align: center;
        }
        .user {
            border: 1px solid #b0b3c9;
            width: 100%;
            max-width: 300px; /* 限制输入框的最大宽度 */
            height: 30px;
            border-radius: 5px;
            text-align: center;
            margin-top: 30px;
        }
        .password {
            border: 1px solid #b0b3c9;
            width: 100%;
            max-width: 300px; /* 限制输入框的最大宽度 */
            height: 30px;
            border-radius: 5px;
            text-align: center;
            margin-top: 30px;
        }


        
        .username {
            text-align: center;
        }
        .registerbutton {
            margin-top: 30px;
            width: 200px;
            height: 50px;
            line-height: 50px;
            border-radius: 5px;
            font-size: 20px;
            font-weight: 700;
            cursor: pointer;
            text-align: center;
            background: linear-gradient(to right, skyblue, pink);
            color: #ffffff;
            border-style: none;
            display: block; /* 确保按钮在容器中独占一行 */
            margin: 30px auto 0; /* 水平居中 */
        }

        .go-to-login {
            cursor: pointer;
            color: #4e7aff;
            border-style: none;
            background: #ffffff;
            display: inline-block; /* 修改为inline-block以水平排列 */
            margin: 10px auto 0; /* 水平居中 */
            text-align: center;
        }
        .container {
            text-align: center; /* 确保容器内的内容水平居中 */
        }

        .password-visibility {
            cursor: pointer;
            color: #4e7aff;
            border-style: none;
            background: #ffffff;
            display: inline-block; /* 修改为inline-block以水平排列 */
            margin: 10px auto 0; /* 水平居中 */
            text-align: center;
        }
        .container {
            text-align: center; /* 确保容器内的内容水平居中 */
        }
    
    </style>
</head>
<body>
    <div id="app">
    <div class="container">
        <div class="register">
            <div class="appname">注册</div>
            
            <div class="username">
                <input class="user" type="text" placeholder="email"id="email"><br>
                <input class="user" type="text" placeholder="username" id="username"><br>
                <input class="password" type="password" placeholder="password" id="password" ><br>
                <input class="password" type="password" placeholder="password check" id="passwordCheck">
            </div>
            <button @click="register" class="registerbutton">register</button>
            <button @click="jumplogin" class="go-to-login">返回登陆</button>
            <button @click="togglePasswordVisibility" class="password-visibility">显示/隐藏密码</button>
        </div>
    </div>
    </div>

  <script>
    const app = Vue.createApp({
      data() {
        return {
          email:'',
          username: '',
          password: '',
          passwordCheck: ''
        };
      },
      
      methods: {
        register() {
          const usernameInput = document.getElementById("username");
          const emailInput = document.getElementById("email");
          const passwordInput = document.getElementById("password");
          const passwordCheckInput = document.getElementById("passwordCheck");

          const usernamevalue= usernameInput.value;
          const emailvalue= emailInput.value;
          const passwordvalue= passwordInput.value;
          const passwordCheckvalue= passwordCheckInput.value;
          if (passwordvalue!==passwordCheckvalue) {
            alert('密码不一致，请重新输入');
            return;
          }
          
          axios.post('http://localhost:5000/register', {
            username: usernamevalue,
            email: emailvalue,
            password: passwordvalue
          }, {
            headers: {
              'Content-Type': 'application/json',
              'X-Requested-With': 'XMLHttpRequest'
            }
          })
        .then(response => {
              alert('注册成功！');
            })
        .catch(error => {
              console.error('注册错误:', error);
              alert('注册时发生错误，请稍后重试。');
            });
            
        },

        togglePasswordVisibility() {
          const passwordInput = document.getElementById("password");
          const passwordcheckInput = document.getElementById("passwordCheck");
          if (passwordInput.type === "password") {
            passwordInput.type = "text";
          } else {
            passwordInput.type = "password";
          }

          if (passwordcheckInput.type === "password") {
            passwordcheckInput.type = "text";
          } else {
            passwordcheckInput.type = "password";
          }
        },

        jumplogin() {
          // 跳转到登录页面的逻辑
          window.location.href ='login.html';
        }
      }
    });

    app.mount('#app');
  </script>
</body>

</html>